<template>
  <div>
    <lt-icon size="20" color="red">
      <AddCircleOutline></AddCircleOutline>
    </lt-icon>

    <lt-icon  size="30" color="yellow">
      <AddCircleOutline></AddCircleOutline>
    </lt-icon>



    <br/>

    <lt-button type="primary" @click="openMessage(1)">主题色(message)</lt-button>
    <lt-button type="danger" @click="openMessage(2)">危险色(message)</lt-button>
    <lt-button type="success" @click="openMessage(3)">成功色(message)</lt-button>
    <lt-button type="warning">警告色</lt-button>
    <lt-button type="info">信息色</lt-button>
    <br/>
    <br/>

    <lt-button type="text">text</lt-button>
    <lt-button type="primary" round>round</lt-button>
    <lt-button type="warning" disabled>disabled</lt-button>

    <br/>
    <br/>

    <lt-button type="primary" plain>plain</lt-button>
    <lt-button type="primary" plain disabled>plain</lt-button>
    <lt-button type="info" plain>plain</lt-button>
    <lt-button type="info" plain disabled>plain</lt-button>
    <lt-button type="danger" plain>plain</lt-button>
    <lt-button type="danger" plain disabled>plain</lt-button>
    <lt-button type="success" plain>plain</lt-button>
    <lt-button type="success" plain disabled>plain</lt-button>
    <lt-button type="warning" plain>plain</lt-button>
    <lt-button type="warning" plain disabled>plain</lt-button>

    <br/>
    <br/>

    <lt-button type="primary" size="small">small</lt-button>
    <lt-button type="primary" size="medium">medium</lt-button>
    <lt-button type="primary" size="large">large</lt-button>

    <br/>
    <br/>

    <lt-button type="primary" loading>加载中</lt-button>
    <lt-button type="danger" loading icon-placement="right">加载中</lt-button>
    <lt-button type="danger" loading plain>加载中</lt-button>
    <lt-button type="text" loading plain>加载中</lt-button>

    <br/>
    <lt-button type="danger" @click="buttonClick">点击事件</lt-button>
    <lt-button type="primary" @mouseenter="buttonMouseenter">鼠标进入</lt-button>
    <br/>

    <lt-button type="primary">
      <lt-icon>
        <AddCircleOutline></AddCircleOutline>
      </lt-icon>
      <span>图标</span>
    </lt-button>

    <br/><br/>
    <lt-button type="primary" @click="openDrawer">打开抽屉</lt-button>
    <LTDrawer v-model="visibleDrawer" :level="0" direction="right" title="我是标题(外层)">
      <div>
        <p>我是内容</p>
        <lt-button type="primary" @click="openDrawer2">打开抽屉</lt-button>
        <LTDrawer v-model="visibleDrawer2" :level="1" direction="right" title="我是标题(内层)">
          <div>
            <p>我是内容</p>
          </div>
        </LTDrawer>
      </div>
    </LTDrawer>

    <br/><br/>
    <lt-button type="primary" @click="openDialog">打开Dialog</lt-button>
    <LTDialog v-model="visibleDialog" title="我是标题"></LTDialog>

    <br/><br/>

    <lt-table  ref="tableRef" :columns="columns" :data="tableData"  stripe @select="select"  :selectable="isRowSelectable">
      <template #name="{row, index}">
        {{row.name}} - {{index}}
      </template>
    </lt-table>

    <br/>
    <div style="max-width: 400px">
      <lt-form ref="formRef" labelAlign="end" :model="userInfo" :rules="{
        password: [{ min: 6, message: '密码长度不能小于6个字符', trigger: 'blur' }],
        username: [{ min: 3, message: '用户名长度不能小于3个字符', trigger: 'blur' }]
      }">
        <lt-form-item label="用户名" prop="username" :rules="[
          { required: true, message: '请输入用户名', trigger: 'change' }
      ]">
          <lt-input v-model="userInfo.username"  placeholder="请输入用户名">
          </lt-input>
        </lt-form-item>
        <lt-form-item label="密码" prop="password" :rules="[
          { required: true, message: '请输入密码', trigger: 'change' },
      ]">
          <lt-input v-model="userInfo.password" type="password" placeholder="请输入密码">
          </lt-input>
        </lt-form-item>
      </lt-form>
      <lt-button type="primary" @click="submitForm">提交</lt-button>
      <lt-button type="info" @click="resetForm">重置</lt-button>
    </div>



  </div>
</template>
<script setup lang="ts">
import {ref, useTemplateRef} from 'vue'
import { AddCircleOutline } from '@vicons/ionicons5'
import Message from '@li-tao/components/message';

// 按钮的事件
const buttonClick = () => {
  console.log("点击")
}
const buttonMouseenter = () => {
  console.log("鼠标进入")
}

// 抽屉相关
const visibleDrawer = ref(false)
const visibleDrawer2 = ref(false)
const  openDrawer = () => {
  console.log("打开抽屉")
  visibleDrawer.value = true
}

const  openDrawer2 = () => {
  console.log("打开抽屉")
  visibleDrawer2.value = true
}

// dialog相关
const visibleDialog = ref(false)
const openDialog = () => {
  visibleDialog.value = true
}


// 表格相关
const tableRef = useTemplateRef('tableRef')
const tableData = ref([
  {"id": 1, "name": "张三", "age": 28, "gender": "男", "city": "北京", "occupation": "软件软件", "salary": 25000, "email": "zhangsan@email.com", "phone": "13800138001", "join_date": "2022-03-15"},
  {"id": 2, "name": "李四", "age": 34, "gender": "女", "city": "上海", "occupation": "产品经理", "salary": 32000, "email": "lisi@email.com", "phone": "13900139002", "join_date": "2020-08-10"},
  {"id": 3, "name": "王五", "age": 45, "gender": "男", "city": "广州", "occupation": "销售总监", "salary": 45000, "email": "wangwu@email.com", "phone": "13700137003", "join_date": "2018-05-20"},
  {"id": 4, "name": "赵六", "age": 29, "gender": "女", "city": "深圳", "occupation": "UI设计师", "salary": 22000, "email": "zhaoliu@email.com", "phone": "13600136004", "join_date": "2021-11-08"},
  {"id": 5, "name": "钱七", "age": 31, "gender": "男", "city": "杭州", "occupation": "数据分析师", "salary": 28000, "email": "qianqi@email.com", "phone": "13500135005", "join_date": "2020-01-25"},
  {"id": 6, "name": "孙八", "age": 26, "gender": "女", "city": "南京", "occupation": "前端开发", "salary": 18000, "email": "sunba@email.com", "phone": "13400134006", "join_date": "2023-02-14"},
  {"id": 7, "name": "周九", "age": 38, "gender": "男", "city": "成都", "occupation": "运维工程师", "salary": 26000, "email": "zhoujiu@email.com", "phone": "13300133007", "join_date": "2019-07-30"},
  {"id": 8, "name": "吴十", "age": 42, "gender": "女", "city": "武汉", "occupation": "人力资源经理", "salary": 35000, "email": "wushi@email.com", "phone": "13200132008", "join_date": "2017-09-12"},
  {"id": 9, "name": "郑十一", "age": 27, "gender": "男", "city": "西安", "occupation": "测试工程师", "salary": 16000, "email": "zhengshiyi@email.com", "phone": "13100131009", "join_date": "2022-06-18"},
  {"id": 10, "name": "王十二", "age": 33, "gender": "女", "city": "重庆", "occupation": "项目经理", "salary": 38000, "email": "wangshier@email.com", "phone": "13000130010", "join_date": "2020-12-05"}
])

const columns = [
  {label: '姓名', prop: 'name'},
  {label: '年龄', prop: 'age', sortable: true},
  {label: '性别', prop: 'gender'},
  {label: '城市', prop: 'city'},
  {label: '职位', prop: 'occupation',width:300},
  {label: '薪资', prop: 'salary',sortable: true},
  {label: '邮箱', prop: 'email'},
  {label: '手机号', prop: 'phone'},
  {label: '入职时间', prop: 'join_date'}
]

const select = (data: any) => {
  console.log('表格选择的数据', data)
}


const isRowSelectable = (row: any ,rowIndex: number) => {
  return row.id === 10 || row.id === 9 || rowIndex === 1
}

setTimeout(() => {
  tableRef.value?.toggleRowSelection(tableData.value[2], true)
},2000)


// 输入框相关
const userInfo = ref({
  username: '1',
  password: '1'
})

const formRef = useTemplateRef('formRef')
const submitForm = async () => {
  const flag = await formRef.value?.validate()
  console.log(flag)
}

const resetForm = () => {
  formRef.value?.resetFields()
}

// message
const openMessage = (flag: number) => {
  if (flag === 1) {
    Message.success({
      message: '成功',
      dangerouslyUseHTMLString: true,
      duration: 2000
    })
  }else if (flag === 2) {
    Message.error({
      message: '失败失败失败失败失败失败失败失败失败失败失败失败失败',
      duration: 2000
    })
  }else {
    Message.primary({
      message: '主题',
      duration: 2000
    })
  }
}


</script>

<style scoped>   

</style>
